<template>
  <div>
    <h1>单向拖拽分组</h1>
    <div>1.拖拽中有2个角色： 可拖动元素 和 容器</div>
    <div>2.给元素添加draggable="true"属性后，元素就变成“可拖动元素”。li没添加draggable="true"时，li的内容是可以选中的，添加之后是不可以选中的</div>
    <div>3.要使容器的drop事件生效，要对容器的dragover进行event.preventDefault()</div>
    <div>4.使用$event可以在触发拖拽事件的同时，传递数据</div>

    <div class="groupDiv">
      <ul id="leftGroup">
        <!-- $event可以获取事件 -->
        <li v-for="item in leftGroupList" :key="item" draggable="true" @dragstart="dragstart($event, item)" @drag="drag" @dragend="dragend">
          item{{item}}
        </li>
      </ul>

      <ul id="rightGroup" @dragenter="dragenter" @dragover="dragover" @dragleave="dragleave" @drop="drop">
        <li v-for="item in rightGroupList" :key="item">
          item{{item}}
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      leftGroupList: [],
      rightGroupList: []
    }
  },
  created () {
    let leftGroupList = [];
    for (let i = 0; i < 10; i++) {
      leftGroupList.push(i + "")
    }
    this.leftGroupList = leftGroupList;
  },
  methods: {
    /** 开始拖拽 可拖动元素时触发 */
    dragstart (dragEvent, item) {
      dragEvent.dataTransfer.setData('dragItem', item);
    },
    /** 拖拽 可拖动元素 的过程中触发 */
    drag () {
      //   console.log("drag");
    },
    /** 拖拽释放 可拖动元素 时触发 */
    dragend () {
      console.log("dragend");
    },

    /** 当拖拽 可拖动元素 进入容器中时触发 */
    dragenter () {
      console.log("dragenter");
    },
    /** 在容器中 拖拽 可拖动元素过程中触发，只要不释放鼠标一直拖动，就会一直触发 */
    dragover (dragEvent) {
      dragEvent.preventDefault();
    },
    /** 当拖拽 可拖动元素 离开容器中时触发 */
    dragleave () {
      console.log("dragleave");
    },
    /** 在容器中，拖拽释放 可拖动元素时触发 */
    drop (dragEvent) {
      let dragItem = dragEvent.dataTransfer.getData('dragItem');
      this.leftGroupList.splice(this.leftGroupList.indexOf(dragItem), 1);
      this.rightGroupList.push(dragItem)
    },

  }

}
</script>

<style lang="less" scoped>
.groupDiv {
  display: flex;
  ul {
    flex-grow: 1;
  }
  #leftGroup {
    background-color: coral;
  }
  #rightGroup {
    background-color: grey;
  }
}
</style>>